<template>
  <div class="pool-management">
    <!-- 主要内容区域 - 添加水平和垂直滚动容器 -->
    <div class="main-content-wrapper">
      <el-card>
        <!-- 搜索区域 -->
        <el-form :model="searchForm" class="search-form" label-width="80px">
          <el-row :gutter="20" align="middle">
            <el-col :span="6">
              <el-form-item label="线索ID" inline>
                <el-input
                  v-model="searchForm.clueId"
                  placeholder="请输入"
                  style="width: 180px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="手机号" inline>
                <el-input
                  v-model="searchForm.phone"
                  placeholder="请输入"
                  style="width: 180px"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="来源" inline>
                <el-select
                  v-model="searchForm.channel"
                  placeholder="请选择"
                  style="width: 180px"
                >
                  <el-option label="全部" value="" />
                  <el-option label="线上活动" value="1" />
                  <el-option label="线下活动" value="2" />
                  <el-option label="自然咨询" value="3" />
                  <el-option label="推荐" value="4" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6" style="text-align: right">
              <el-form-item>
                <el-button
                  type="primary"
                  @click="handleSearch"
                  style="margin-right: 10px"
                  >查询</el-button
                >
                <el-button @click="handleReset">重置</el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>

        <!-- 线索表格 -->
        <el-table
          :data="clueList"
          stripe
          style="width: 100%; min-width: 1400px; font-size: 14px"
          :header-cell-style="{ 'font-size': '14px', padding: '10px 12px' }"
        >
          <el-table-column label="序号" type="index" width="80" />
          <el-table-column prop="id" label="线索ID" width="100" />
          <el-table-column prop="phone" label="手机号" width="150" />
          <el-table-column prop="name" label="客户姓名" width="120" />
          <el-table-column prop="gender" label="性别" width="80">
            <template #default="{ row }">
              {{ row.gender === 1 ? "男" : row.gender === 2 ? "女" : "未知" }}
            </template>
          </el-table-column>
          <el-table-column prop="age" label="年龄" width="80" />
          <el-table-column prop="channel" label="来源" width="120">
            <template #default="{ row }">
              <el-tag size="small">
                {{ getChannelText(row.channel) }}
              </el-tag>
            </template>
          </el-table-column>
           <el-table-column prop="activityName" label="活动信息" width="200" />
           <el-table-column prop="createTime" label="创建时间" width="200" />
          <el-table-column prop="updateTime" label="更新时间" width="200" />
          <el-table-column label="操作" width="100" align="center">
            <template #default="{ row }">
              <el-button type="primary" size="small" @click="handleView(row)"
                >查看</el-button
              >
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-container">
          <el-pagination
            v-model:current-page="pagination.currentPage"
            v-model:page-size="pagination.pageSize"
            :page-sizes="[10, 20, 50, 100]"
            layout="total, sizes, prev, pager, next, jumper"
            :total="pagination.total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-card>
    </div>

    <!-- 查看线索详情对话框 -->
    <el-dialog
      v-model="detailVisible"
      title="线索详情"
      width="600px"
      @close="handleCloseDetail"
    >
      <el-descriptions :column="1" :border="true" label-align="left">
        <el-descriptions-item label="线索ID">{{
          selectedClue?.id || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="手机号">{{
          selectedClue?.phone || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="客户姓名">{{
          selectedClue?.name || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="性别">{{
          selectedClue?.gender === 1
            ? "男"
            : selectedClue?.gender === 2
            ? "女"
            : "未知"
        }}</el-descriptions-item>
        <el-descriptions-item label="年龄">{{
          selectedClue?.age || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="来源">{{
          selectedClue ? getChannelText(selectedClue.channel) : "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="活动信息">{{
          selectedClue?.activityName || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="微信">{{
          selectedClue?.wechat || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="QQ">{{
          selectedClue?.qq || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="状态">{{
          selectedClue ? getStatusText(selectedClue.status) : "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="意向学科">{{
          selectedClue ? getSubjectText(selectedClue.subject) : "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="意向等级">{{
          selectedClue ? getLevelText(selectedClue.level) : "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="下次跟进时间">{{
          selectedClue?.nextTime || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          selectedClue?.createTime || "-"
        }}</el-descriptions-item>
        <el-descriptions-item label="更新时间">{{
          selectedClue?.updateTime || "-"
        }}</el-descriptions-item>
      </el-descriptions>
    </el-dialog>
  </div>
</template>

<script>
import { ref, reactive, onMounted } from "vue";
import axios from "axios";
import { ElMessage } from "element-plus";

export default {
  name: "CluePoolManagement",
  setup() {
    // 搜索表单
    const searchForm = reactive({
      clueId: "",
      phone: "",
      channel: "",
    });

    // 线索列表数据
    const clueList = ref([]);

    // 分页数据
    const pagination = reactive({
      currentPage: 1,
      pageSize: 10,
      total: 0,
    });

    // 详情对话框
    const detailVisible = ref(false);
    const selectedClue = ref(null);

    // 获取来源文本
    const getChannelText = (channel) => {
      const channelMap = {
        1: "线上活动",
        2: "线下活动",
        3: "自然咨询",
        4: "推荐",
      };
      return channelMap[channel] || "未知";
    };

    // 获取状态类型
    const getStatusType = (status) => {
      const typeMap = {
        1: "info",
        2: "warning",
        3: "success",
        4: "danger",
      };
      return typeMap[status] || "default";
    };

    // 获取状态文本
    const getStatusText = (status) => {
      const statusMap = {
        1: "未跟进",
        2: "跟进中",
        3: "已跟进",
        4: "无效",
      };
      return statusMap[status] || "未知";
    };

    // 获取意向学科文本
    const getSubjectText = (subject) => {
      const subjectMap = {
        1: "人工智能(AI)",
        2: "大数据",
        3: "云计算",
        4: "前端开发",
        5: "后端开发",
        6: "移动开发",
      };
      return subjectMap[subject] || "未知";
    };

    // 获取意向等级文本
    const getLevelText = (level) => {
      const levelMap = {
        1: "高",
        2: "中",
        3: "低",
        4: "不确定",
      };
      return levelMap[level] || "未知";
    };

    // 获取线索列表
    const getClueList = async () => {
      try {
        const params = {
          ...searchForm,
          page: pagination.currentPage,
          pageSize: pagination.pageSize,
        };

        // 移除空值参数
        Object.keys(params).forEach((key) => {
          if (
            params[key] === "" ||
            params[key] === null ||
            params[key] === undefined
          ) {
            delete params[key];
          }
        });

        const response = await axios.get("/api/clues/pool", {
          params: params,
        });

        const result = response.data;

        if (result && typeof result === "object") {
          if (result.code === 1) {
            if (result.data && Array.isArray(result.data.rows)) {
              clueList.value = result.data.rows;
              pagination.total = Number(result.data.total) || 0;

              if (clueList.value.length === 0) {
                ElMessage.info("暂无数据");
              }
            } else {
              ElMessage.error("响应数据格式错误");
            }
          } else {
            ElMessage.error(result.msg || "获取线索列表失败");
          }
        } else {
          ElMessage.error("获取线索列表失败");
        }
      } catch (error) {
        console.error("获取线索列表异常:", error);
        ElMessage.error("获取线索列表失败");
      }
    };

    // 搜索
    const handleSearch = () => {
      pagination.currentPage = 1;
      getClueList();
    };

    // 重置
    const handleReset = () => {
      searchForm.clueId = "";
      searchForm.phone = "";
      searchForm.channel = "";
      pagination.currentPage = 1;
      getClueList();
    };

    // 处理分页大小变化
    const handleSizeChange = (size) => {
      pagination.pageSize = size;
      getClueList();
    };

    // 处理当前页变化
    const handleCurrentChange = (current) => {
      pagination.currentPage = current;
      getClueList();
    };

    // 查看详情
    const handleView = (row) => {
      selectedClue.value = { ...row };
      detailVisible.value = true;
    };

    // 关闭详情对话框
    const handleCloseDetail = () => {
      selectedClue.value = null;
      detailVisible.value = false;
    };

    // 组件挂载时获取数据
    onMounted(() => {
      getClueList();
    });

    return {
      searchForm,
      clueList,
      pagination,
      detailVisible,
      selectedClue,
      getChannelText,
      getStatusType,
      getStatusText,
      getSubjectText,
      getLevelText,
      handleSearch,
      handleReset,
      handleSizeChange,
      handleCurrentChange,
      handleView,
      handleCloseDetail,
    };
  },
};
</script>

<style scoped>
.pool-management {
  padding: 20px;
  min-height: 100vh;
  background-color: #f5f7fa;
}

.main-content-wrapper {
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100vh - 40px);
}

.search-form {
  margin-bottom: 20px;
  padding: 15px;
  background-color: #fff;
  border-radius: 4px;
}

.pagination-container {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
  padding: 10px 0;
}

/* 自定义滚动条样式 */
.main-content-wrapper::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.main-content-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 4px;
}

.main-content-wrapper::-webkit-scrollbar-thumb {
  background: #c0c4cc;
  border-radius: 4px;
}

.main-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #909399;
}
</style>
